<template>
  <view>
    <view class="my-search-container" >
      
       <view class="my-search-item">
         <!-- 使用uni-ui 提供的图标组件 -->
         <view class="my-search-box">
           <uni-icons type="search" size="25" class="icon"></uni-icons>
           <!-- <text class="placeholder">搜索</text> -->
           <input type="text" placeholder="请输入公文名称" class="icon" />
         </view>
         <view > 
            <image src="../../static/icon/choose.png" class="icon-img" @tap="showPop"></image>
         </view>

       </view>
       
       <!-- 底部弹出层 -->
       <view class="pop" v-show="isShow" >
          <view class="pop-mask" @tap="hidePop"></view>
          <view class="pop-box" :animation="animationData">
                hello
           </view>
       </view>
  
    </view>
   
   
  </view>
</template>

<script>
  
  export default {
    
    
    animationData:{},
    isShow:false,
    
    
    data() {
      return {
        
      };
    },
    methods:{
  
      showPop(){
        console.log(12);
        var animation = uni.createAnimation({        
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShow = true;
        setTimeout(()=>{
            animation.translateY(0).step();
            this.animationData = animation.export();
        },200)
        
      },
      hidePop(){
        
        var animation = uni.createAnimation({
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShow = true;
        setTimeout(()=>{
            animation.translateY(0).step();
            this.isShow = false;
        },200)
      },
      
    }
    
  }
</script>

<style lang="scss">

.my-search-container{
  background-color: #405BDE;
}

.my-search-item{
  display: flex;
  
}
.my-search-box{
  display: flex;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  width: 600rpx;
  height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 20px;
  .icon{
    margin-left: 10rpx;
    margin-top: 15rpx;
  }
}
.icon-img{
  width: 60rpx;
  height: 60rpx;
  margin-top: 5rpx;
  margin-left: 20rpx;
}




.pop{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.pop-mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.pop-box{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 600px;
  background-color: #FFFFFF;
}

.pop-img{
  width: 260rpx;
  height: 260rpx;
}

.pop-num{
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
}

.pop-sub{
  line-height: 80rpx;
  background-color: #49BDFB;
  color: #FFFFFF;
  text-align: center;
}


</style>